import { initData } from "./state.js";
import { compileToFunctions } from "./compile/index.js";

// 给vue添加_init方法
export function initMixin(Vue) {
  //初始化选项
  Vue.prototype._init = function (options) {
    const vm = this;
    //vue.$options 指向初始化选项 方便后续使用
    vm.$options = options;
    //初始化状态
    initState(vm);
    if (options.el) {
      vm.$mount(options.el); //数据的挂载
    }
  };
  // 挂载方法
  // script 标签引用vue.global.js 时 这个编译过程在浏览器端进行
  // runtime 只包含运行时的代码 不包含编译时的代码，整个编译是在打包时进行的 「loaders」 用runtime时不能用template
  Vue.prototype.$mount = function (el) {
    const vm = this;
    const options = vm.$options;
    el = document.querySelector(el);
    if (!el) {
      return;
    }
    //没有render函数 就用template或者el的outerHTML作为模版
    if (!options.render) {
      let template = options.template;
      // 如果没有template选项，就用el的outerHTML作为模版
      if (!template) {
        template = el.outerHTML;
      }

      if (template) {
        // 模版编译
        let render = compileToFunctions(template);
        options.render = render; //jsx会被编译为h函数
      }
    }
  };
}

function initState(vm) {
  const opts = vm.$options; //获取初始化选项
  if (opts.data) {
    initData(vm);
  }
}
